<script lang="ts" setup>
import { ref } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { message } from 'ant-design-vue'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getSendGoodsSku } from '#/api/goodsPurchaseProgress2'

interface RowType {
  warehouse: string
  first: number
  second: number
  third: number
  fourth: number
  fifth: number
  sixth: number
  seventh: number
  eighth: number
  ninth: number
  tenth: number
  eleven: number
  twelve: number
  total: number
}

const data = ref<any>({})

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/5',
  onCancel() {
    modalApi.close()
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      data.value = modalApi.getData<Record<string, any>>()
    }
  },
})

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { type: 'seq', width: 50, title: '序号' },
    { field: 'warehouse', title: '仓库', width: 100 },
    { field: 'first', title: '28#44#160#37#S', width: 100, align: 'right' },
    { field: 'second', title: '29#46#165#38#M', width: 100, align: 'right' },
    { field: 'third', title: '30#48#170#39#L', width: 100, align: 'right' },
    { field: 'fourth', title: '31#50#175#40#XL', width: 100, align: 'right' },
    { field: 'fifth', title: '32#52#180#41#2XL', width: 100, align: 'right' },
    { field: 'sixth', title: '33#54#185#42#3XL', width: 100, align: 'right' },
    { field: 'seventh', title: '34#56#190#43#4XL', width: 100, align: 'right' },
    { field: 'eighth', title: '35#58#195#44#5XL', width: 100, align: 'right' },
    { field: 'ninth', title: '36#6XL', width: 80, align: 'right' },
    { field: 'tenth', title: '38#7XL', width: 80, align: 'right' },
    { field: 'eleven', title: '40', width: 70, align: 'right' },
    { field: 'twelve', title: '42#均码', width: 80, align: 'right' },
    { field: 'total', title: '合计', width: 80, align: 'right' },
  ],
  exportConfig: {},
  height: '400px',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        try {
          const res = await getSendGoodsSku({
            goods_purchase_sn: data.value.goods_purchase_sn,
            goods_id: data.value.goods_id,
          })
          return res.data
        } catch (error) {
          message.error('获取SKU数据失败')
          return []
        }
      },
    },
  },
  showOverflow: false,
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})
</script>

<template>
  <Modal>
    <Grid />
  </Modal>
</template>

<style lang="less" scoped>
:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
}

:deep(.ant-table-tbody > tr > td) {
  border-right: 1px solid #f0f0f0;
}

:deep(.ant-table-tbody > tr:nth-child(even)) {
  background: #fafafa;
}
</style>
